<script setup lang="ts">
defineProps<{

}>()

import { computed, ref,onMounted  } from 'vue';


</script>

<template>
    <div class="notepad-icon" >			
        <div class="paper">
            <div class="dings">
				<div class="ding"></div>
				<div class="ding"></div>
				<div class="ding"></div>
				<div class="ding"></div>
				<div class="ding"></div>
			</div>
            <div class="lines">				
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>            
        </div>
        <div class="bottom"></div>        
    </div>
</template>

<style scoped>    
		.notepad-icon{
			width: 4em;
			height: 6em;
			display: flex;
			margin:auto;
			font-size: 1em;
		}
		.notepad-icon .paper{
			width: 100%;
			height: 70%;
			background-color: rgb(105, 202, 231);
			border-radius: 8%;
		}
		.notepad-icon .dings{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.notepad-icon .bottom{
			width: 100%;
			height: 30%;
			/* background-color: rgb(105, 202, 231); */
		}
		.notepad-icon .dings .ding{
			width: 0.5em;
			height: 0.5em;
			background-color: rgb(255, 255, 255);
			border-radius: 50%;
			margin: 0.2em;
		}
		.notepad-icon .lines{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.notepad-icon .lines .line{
			width: 70%;
			height: 0.2em;
			background-color: rgb(5, 112, 147);
			margin: 0.3em;
			border-radius: 10%;
		}
		.notepad-icon .bottom{
			border-top: 0.2em solid #fff;
			border-bottom: 0.2em solid rgb(5, 112, 147);		
			height: 0;
		}

</style>